<template>
	<div class="song-full">
		<div class="header-bg" v-if="this.music.picUrl" :style="{ 'background-image': 'url(' + this.music.picUrl + ')' }">
        </div> 
		<div class="header-bg" v-else :style="{ 'background-image': 'url(' + this.music.al.picUrl + ')' }">
        </div> 
		<i class="fa fa-chevron-left fa-2x back" aria-hidden="true" @click="$emit('hidefull', false)"></i>
		<i class="fa fa-th-list fa-2x list" aria-hidden="true" @click="songlist=!songlist"></i>

		<div class="song-title">
			{{music.song.artists[0].name}} {{music.name}}
		</div>
		<div class="song-turn">
			<div class="song-pic">
				<img :src="music.picUrl||music.al.picUrl" :style="{animationPlayState:playstate?'running':'paused'}">
			</div>
		</div>
		
		<div class="lyric">
			<ul :style="{ transform: `translateY(${toppx}px)` }">
				<template v-for="(l, i) in lyricArray">
					<li v-if="l" :key="i" :class="{ highlight: i == highIndex }">
						{{ l.lyric }}
					</li>
				</template>
			</ul>
		</div>
		<div class="controls">
			<div class="ctrls">
				<i class="fa fa-backward fa-2x" aria-hidden="true" @click="$emit('changemusic', 1)"></i>
				
				<i :class="['fa','fa-2x',playstate?'fa-pause':'fa-play']" @click="play"></i>
				
				<i class="fa fa-forward fa-2x" aria-hidden="true" @click="$emit('changemusic', 2)"></i>

				<i @click="iconlist=!iconlist" class="list-icon">
					<img src="../assets/list.svg">
					<div class="icon" v-show="iconlist">
						<i class="fa fa-random fa-2x" aria-hidden="true" :class="{active:cirlceMode=='random'}"
							@click="$emit('changecircle', 'random')"></i>
						<i class="fa fa-undo fa-2x" aria-hidden="true" :class="{active:cirlceMode=='single'}"
						@click="$emit('changecircle', 'single')"></i>
						<i class="fa fa-list fa-2x" aria-hidden="true" :class="{active:cirlceMode=='list'}"
						@click="$emit('changecircle', 'list')"></i>
					</div>
				</i>
				
			</div>
			<div class="range">
				<span>{{currentTime|formatTime}}</span>
				<input type="range" v-model="processTime" min="0" max="100" />
				<span>{{totalTime|formatTime}}</span>
			</div>
			<div class="playlist" v-show="songlist">
				<ul>
					播放列表
					<li v-for="s in playCollect" :key="s.id" :class="{ active: s.id == music.id }"
						@click="$emit('play',s)">
						{{ s.name }}
					</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			music: Object,
			playstate: {
				type: Boolean,
				default: true
			},
			currentTime: {
				type: Number,
				default: 0,
			},
			totalTime: {
				type: Number,
				default: 0,
			},
			playCollect: Array,
			cirlceMode: {
				type: String,
				default: "list"
			}
		},
		data() {
			return {
				lyric: null,
				songlist: false,
				iconlist: false
			}
		},
		created() {
			this.getLyric();
		},
		methods: {

			async getLyric() {
				let re = await this.axios.get("/lyric?id=" + this.music.id);
				this.lyric = re.lrc.lyric;
			},
			play() {
				this.$emit("playorpaused");
			},
		},
		computed: {
			toppx() { //计算属性 计算ul播放歌曲的时候移动的距离
				let t = (this.highIndex * 30) - 30; // 歌词li元素的高度 * 当前歌词位置 -100居中
				return -t; //取负值 向上滚动.
			},
			highIndex() {
				if (this.lyricArray.length < 2) return 0;
				//计算当前高亮的下标
				//判断当前播放大于等于最后一条歌词时间的时候 不需要循环.高亮最后一条.
				if (
					this.currentTime >= this.lyricArray[this.lyricArray.length - 2].time
				) {
					return this.lyricArray.length - 2;
				}
				for (let i = 0; i < this.lyricArray.length; i++) {
					//获取当前高亮歌词的下标 计算属性依赖于currentTime lyricArray
					if (
						this.lyricArray[i].time <= this.currentTime &&
						this.currentTime < this.lyricArray[i + 1].time
					) {
						//    console.log('highIndex===>',i)
						return i;
					}
				}
				return 0;
			},
			lyricArray() {
				//处理歌词信息
				if (!this.lyric) return [];
				let larr = this.lyric.split("\n");
				let reg = /\[(\d+?):(\d+?\.\d+)\]([.\s\S]*)/; //[00:01.62]要多少任性的表情
				return larr.map((item) => {
					if (reg.test(item)) {
						return {
							time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
							lyric: RegExp.$3,
						};
					}
				});
			},
			processTime: {
				//v-model绑定计算属性。设置getter/setter
				get() {
					return (this.currentTime / this.totalTime) * 100;
				},
				set(value) {
					//当拖动修改range的值的时候，就修改播放时间.
					console.log("计算属性改变的值=>", value);
					let ctime = (value / 100) * this.totalTime; //获取当前拖动的时间值.
					this.$emit("changetime", ctime); //反向传值修改当前播放音乐时间
				},
			},
		},
		watch: {
			music() {
				//当歌曲发生变化的时候，重新获取歌词.
				this.lyric = ""; //当音乐变化的时候得清空歌词.
				this.$emit("changetime", 0); //反向传值修改当前播放音乐时间
				this.getLyric();
			},
		},
		filters: {
			formatTime(value) {
				let minut = parseInt(value / 60); //70秒 1:10
				let sec = parseInt(value % 60); //秒数
				if (isNaN(minut)) return "00:00";
				minut = minut < 10 ? "0" + minut : minut; //分钟数小于10 加0
				sec = sec < 10 ? "0" + sec : sec;
				return minut + ":" + sec;
			}
		}
	}
</script>

<style lang="less" scoped>
	.song-full {
		overflow: hidden;
		z-index: 999;
		position: relative;
		height: 100%;

		.header-bg {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			// z-index: 1;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: cover;
			filter: blur(20px);
			transform: scale(1.5);
			&::after {
				content: " ";
				background-color: rgba(0, 0, 0, 0.25);
			}
		}

		.back {
			position: absolute;
			top: 30px;
			left: 10px;
		}

		.list{
			position: absolute;
			top: 30px;
			right: 10px;
		}

		.song-turn {
			width: 247px;
			height: 247px;
			margin: 35px auto 10px;
			position: relative;
			text-align: center;

			&::before {
				content: " ";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 2;
				background: url(../assets/disc.png) no-repeat;
				background-size: contain;
			}
			
			.song-pic {
				width: 184px;
				height: 184px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					animation: round 2s linear infinite;
				}
			}

			.fa {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #333;
				z-index: 11;

			}
		}

		.song-title {
			width: 247px;
			margin: 0 auto;
			text-align: center;
			font-size: 20px;
			margin-bottom: 10px;
			margin-top: 30px;
		}

		.lyric {
			height: 13vh;
			overflow: hidden;
			position: relative;

			ul {
				position: absolute;
				width: 100%;
				top: 0px;
				transition: transform 0.5s linear;

				li {
					text-align: center;
					height: 30px;
					line-height: 30px;
					color: white;
					white-space: nowrap;

					&.highlight {
						font-size: 20px;
						font-weight: bold;
						color: skyblue;
					}
				}
			}
		}

		.controls {
			position: absolute;
			bottom: 25px;
			left: 0;
			width: 100%;

			.range {
				display: flex;
				align-items: center;
				padding: 20px;
				color: white;
				background-size: 98% 3px;
				margin: 0 auto;
				width: 90%;
				
				

				input {
					flex: 1;
					height: 3px; /*横条的高度*/
				}
				&>input::-webkit-slider-thumb {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background-color: #fff;
					box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),
					0 3px 5px rgba(0, 0, 0, 0.2);
					cursor: pointer;
					-webkit-appearance: none;
					border: 0;
				}
			}

			.ctrls {
				height: 30px;
				display: flex;
				margin: 10px 20px 10px 40px;
				// align-items: center;
				justify-content: space-around;

				i {
					// flex: 1;

					&.active {
						color: skyblue;
					}
				}
				.list-icon{
					width: 28px;
					// height: 28px;
					position: relative;
					&img{
						width: 28px;
					}
					.icon{
						position: absolute;
						display: flex;
						flex-direction: column;
						height: 100px;
						justify-content: space-around;
						align-items: center;
						top: -100px;
						left: 0;
					}
				}
			}
			.playlist {
				position: absolute;
				top: -450px;
				right: 37.5px;
				width: 300px;
				height: 400px;
				background-color: #000;
				border-radius: 10px;
				color: white;
				z-index: 12;
				overflow: hidden;
				ul {
					width: 80%;
					height: 100%;
					white-space: nowrap;
					overflow: auto;
					text-align: center;
					color: white;
					margin-top: 20px;
					margin-left: 10%;
					margin-right: 10%;

					li {
						border-bottom: 1px solid #eee;
						padding-top: 10px;

						// &.active {
						// 	color: red;
						// 	font-weight: 700;
						// 	font-size: 20px;
						// }
					}
				}
			}
		}
	}

	@keyframes round {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
